<template>
	<div id="box">
		<div class='container'>
			<div class='bk bk_one'>
				<Top/>
				<Title/>
				<SowingMap/>
				<Relevant/>
				<Mains/>
			</div>
			<div class='bk bk_tow'>
				<Train/>
				<Project/>
				<Product/>
			</div>
			<div class='bk bk_four'>
				<SowingMap3/>
				<Process/>
				<Foot/>
			</div>
		</div>
	</div>
</template>

<script>
import Top from "../components/base/Top.vue";
import Title from "../components/base/title.vue";
import SowingMap from "../components/home/sowingMap.vue";
import Relevant from "../components/home/Relevant.vue";
import Mains from "../components/home/mains.vue";
import Train from "../components/home/train.vue";
import Project from "../components/home/project.vue";
import Product from "../components/home/product.vue";
import Process from "../components/home/process.vue";
import Foot from "../components/base/foot.vue";
import SowingMap3 from "../components/home/sowingMap3.vue";

export default {
  name: "home",
  components: {
    Top,
    Title,
    SowingMap,
    Relevant,
    Mains,
    Train,
    Project,
    Product,
    Process,
    Foot,
    SowingMap3
  }
};
</script>

<style scoped>
#box {
  background-color: #fff;
  width: 100%;
}

.bk {
  width: 100%;
}

.bk_one {
  background: url(../../../static/imgs/bk/bk_1.jpg) no-repeat;
}

.bk_tow {
  background: url(../../../static/imgs/bk/bk_2.jpg) no-repeat;
}

.bk_four {
  padding-top: 600px;
  background: url(../../../static/imgs/bk/bk_4.jpg) no-repeat;
  background-size: cover;
}
</style>